body {
    background-image:radial-gradient(#FA8AFF,#96F1FF);
}

#body_home {
    font-family: "Bahnschrift";
}

footer {
    font-family: 'Bahnschrift';
    margin: 4px 0 0 10px;
}

.heading {
    color: rgb(0, 0, 0);
    font-weight: bolder;
    font-size: 100px;
    margin: 32px 0 24px 40px;
}

.container {
    height: 1440px;
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 0px 30px 10px 30px;
}

.card {
    border: 1px solid #e2e2e2;
    border-radius: 18px;
    box-shadow: 2px 2px 4px grey, -2px -2px 4px whitesmoke;
    background-color: aliceblue;
    grid-column: span 2;
    padding: 10px 10px 0px 20px;
}

.card:hover {
    background-color: #f4deff;
    padding: 20px 10px 0px 22px;
}

.big {
    grid-column: span 4;
}

.top {
    grid-row-start: 1;
}

.icon {
    width: 60px;
    height: 60px;
}

.pfp {
    border-radius: 50%;
}

#pfp {
    width: 250px;
    height: 250px;
    border-radius: 50%;
}

.slab_text {
    font-size: 40px;
}

.slab_text a {
    font-size: 30px;
    color: grey;
}

#hi {
    font-size: 50px;
    font-weight: bolder;
}

#hi a {
    font-weight: normal;
}

.loading {
    width: 200px;
    height: 120px;
    margin: 220px auto;
}

.loading img {
    width: 100%;
    height: 100%;
}

                        /*Media Queries for Home Page*/

@media (min-width: 768px) and (max-width: 1024px) {

    .heading {
        font-size: 70px;
        margin-left: 60px;
    }

    .container {
        height: 1000px;
        margin-left: 70px;
        margin-right: 70px;
    }

    .icon {
        width: 40px;
        height: 40px;
    }

    #pfp {
        width: 110px;
        height: 110px;
    }

    .slab_text {
        font-size: 25px;
    }

    .slab_text a {
        font-size: 20px;
    }

    #hi {
        font-size: 30px;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {

    .heading {
        font-size: 60px;
        margin: 40px 0 30px 128px;
    }
    
    .container {
        height: 450px;
        margin: 10px 180px 10px 180px;
    }
    
    .card {
        grid-column: span 1;
        padding-right: 5px;
    }

    .card:hover {
        padding-right: 5px;
    }

    .big {
        grid-column: span 2;
    }
    
    .top {
        grid-column-start: 3;
        grid-column-end: 5;
    }

    .icon {
        width: 48px;
        height: 48px;
    }

    #pfp {
        width: 80px;
        height: 80px;
    }

    .slab_text {
        font-size: 20px;
    }

    .slab_text a {
        font-size: 15px;
    }

    #hi {
        font-size: 31px;
    }
    
}

@media (min-width: 1440px) {

    .heading {
        font-size: 60px;
        margin: 40px 0 40px 128px;
    }
    
    .container {
        height: 450px;
        margin: 10px 190px 10px 190px;
    }
    
    .card {
        grid-column: span 1;
        padding-right: 5px;
    }

    .card:hover {
        padding-right: 5px;
    }

    .big {
        grid-column: span 2;
    }
    
    .top {
        grid-column-start: 3;
        grid-column-end: 5;
    }

    .icon {
        width: 48px;
        height: 48px;
    }

    #pfp {
        width: 80px;
        height: 80px;
    }

    .slab_text {
        font-size: 20px;
    }

    .slab_text a {
        font-size: 15px;
    }

    #hi {
        font-size: 31px;
    }
}